<template>
  <section class="todoapp">
      <header class="header">
          <h1>todos</h1>
          <input
              class="new-todo"
              placeholder="What needs to be done?"
              autofocus
              @keydown.enter="addTodo"
          />
      </header>
      <!-- This section should be hidden by default and shown when there are todos -->
      <section class="main">
          <input @click="toggleAll" id="toggle-all" class="toggle-all" type="checkbox" :checked="undownNum === 0 && todoList.length !== 0" />
          <label for="toggle-all">Mark all as complete</label>
          <ul class="todo-list">
              <li v-for="item in todoList" :key="item.id" :class="{
                        completed: item.is_checked,
                        editing: item.is_editing,
                    }">
                  <div class="view">
                      <input
                          class="toggle"
                          type="checkbox"
                          v-model="item.is_checked"
                      />
                      <label> {{ item.text }} </label>
                      <button class="destroy"></button>
                  </div>
                  <input class="edit" :value="item.text" />
              </li>

              <!-- <li class="completed">
                  <div class="view">
                      <input class="toggle" type="checkbox" checked />
                      <label>Taste JavaScript</label>
                      <button class="destroy"></button>
                  </div>
                  <input class="edit" value="Create a TodoMVC template" />
              </li>
              <li class="editing">
                  <div class="view">
                      <input class="toggle" type="checkbox" checked />
                      <label>Taste JavaScript</label>
                      <button class="destroy"></button>
                  </div>
                  <input class="edit" value="Create a TodoMVC template" />
              </li>
              <li>
                  <div class="view">
                      <input class="toggle" type="checkbox" />
                      <label>Buy a unicorn</label>
                      <button class="destroy"></button>
                  </div>
                  <input class="edit" value="Rule the web" />
              </li> -->
          </ul>
      </section>
      <!-- This footer should hidden by default and shown when there are todos -->
      <footer class="footer">
          <!-- This should be `0 items left` by default -->
          <span class="todo-count"><strong>{{ undownNum }}</strong> item left</span>
          <!-- Remove this if you don't implement routing -->
          <ul class="filters">
              <li>
                  <a :class="{ selected:isShow === 'all'}" @click="isShow = 'all' " name="all" href="javascript:;">All</a>
              </li>
              <li>
                  <a :class="{ selected:isShow === 'active' }" @click="isShow = 'active' " name="active" href="javascript:;">Active</a>
              </li>
              <li>
                  <a :class="{ selected:isShow === 'completed' }" @click="isShow = 'completed' " name="completed" href="javascript:;">Completed</a>
              </li>
          </ul>
          <!-- Hidden if no completed items are left ↓ -->
          <button v-show="undownNum !== todoList.length" class="clear-completed">Clear completed</button>
      </footer>
  </section>
  <footer class="info">
      <p>Double-click to edit a todo</p>
      <!-- Remove the below line ↓ -->
      <p>Template by <a href="javascript:;">Sindre Sorhus</a></p>
      <!-- Change this out with your name and url ↓ -->
      <p>Created by <a href="javascript:;">you</a></p>
      <p>Part of <a href="javascript:;">TodoMVC</a></p>
  </footer>
</template>

<script>
export default {
  data() {
      return {
        // 用于渲染页面, 和 template 连用
        todoList:[],
        // 全部数据,在 js 中 我们只操作 baseList
        baseList: [
                {
                    id: 1,
                    text: "吃饭",
                    is_checked: true,
                    is_editing: false,
                },
                {
                    id: 2,
                    text: "睡觉",
                    is_checked: false,
                    is_editing: false,
                },
                {
                    id: 3,
                    text: "打豆豆",
                    is_checked: false,
                    is_editing: false,
                },
            ],
        isShow : 'all'
      };
  },
  methods: {
    // 点击全选按钮
    toggleAll(e){
      // console.log(e.target.checked)
      this.baseList.forEach(t => t.is_checked = e.target.checked)
    },
    // 添加新的todo
    addTodo(e){
      // 这样可以拿到输入的值
      // console.log("键盘按下",e.target.value);
      this.baseList.push({
        id:this.baseList[this.baseList.length - 1].id + 1,
        text:e.target.value,
        is_checked: false,
        is_editing: false,
      })
      e.target.value = ''
    }
  },
  computed:{
    undownNum(){
      // 寻找数组中有多少个未完成的
      const arr = this.baseList.filter(t => !t.is_checked)
      // 返回未完成的数量
      return arr.length
    },
    base_show(){
        // 当前计算属性中使用了 baseList 和 isshow这两个变量有一个发生变化,都会影响 当前计算属性的值
        return {
            base:this.baseList,
            show:this.isShow
        }
    }
  },
  watch:{
    base_show:{
        handler(){
            console.log(123);
            if (this.isShow === 'all') {
                this.todoList = this.baseList
            }
            if (this.isShow === 'active') {
                this.todoList = this.baseList.filter((t) => !t.is_checked)
            }
            if (this.isShow === 'completed') {
                this.todoList = this.baseList.filter((t) => t.is_checked)
            }
        },
        immediate:true,
        deep:true
    }
  }
};
</script>

<style></style>